<!-- 注册 -->
<template>
  <!-- ✅ 顶部导航栏 + 语言切换图标 -->
  <TopNavBar type="back" :title="_t18('register')">
    <template #right>
      <image-load
        :filePath="currentLang.imgUrl"
        class="lang-switch-icon"
        @click="$router.push('/language-selection')"
      />
    </template>
  </TopNavBar>

  <div class="loginMethod">
    <van-tabs
      type="card"
      title-inactive-color="#000"
      v-model:active="active"
      title-active-color="#fff"
    >
      <van-tab v-for="(item, index) in tabList" :key="index" :title="item.title">
        <component :is="currentComponent"></component>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { _t18 } from '@/utils/public'
import AccountRegister from './components/sign-up/AccountRegister.vue'
import EmailRegister from './components/sign-up/EmailRegister.vue'
import MobileRegister from './components/sign-up/MobileRegister.vue'
import { useMainStore } from '@/store/index.js'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const mainStore = useMainStore()

/** ✅ 当前语言对应国旗图标（自动显示） */
const currentLang = computed(() =>
  mainStore.languageList.find((elem) => elem.dictValue === mainStore.language) || {}
)

/** ✅ 注册方式逻辑保持不变 */
const tabList = computed(() => {
  let list = []
  if (mainStore.getLoginMethodList.ordinaryIsOpen) {
    list.push({
      id: 1,
      title: _t18('register_account', ['bitmake']),
      type: '1',
      componentName: AccountRegister
    })
  }
  if (mainStore.getLoginMethodList.emailIsOpen) {
    list.push({
      id: 2,
      title: _t18('register_email'),
      type: '2',
      componentName: EmailRegister
    })
  }
  if (mainStore.getLoginMethodList.phoneIsOpen) {
    list.push({
      id: 3,
      title: _t18('register_mobile'),
      type: '3',
      componentName: MobileRegister
    })
  }
  if (['coinsexpto'].includes(__config._APP_ENV)) {
    list = list.reverse()
  }
  return list
})

/** ✅ 切换组件逻辑 */
const currentComponent = computed(() => {
  return tabList.value[active.value]?.componentName || AccountRegister
})

/** ✅ 初始激活项 */
const active = ref(0)
</script>

<style lang="scss" scoped>
* {
  color: var(--ex-default-font-color);
  font-size: 14px;
}

.loginMethod {
  padding: 30px 15px 0;
  & > p {
    margin-top: 10px;
    text-align: right;
    color: var(--ex-font-color9);
  }

  ::v-deep(.van-tabs__nav--card) {
    margin: 0 !important;
    height: 40px !important;
    border-radius: 30px;
    overflow: hidden;
    padding: 4px 2px !important;
    border: none !important;
  }

  ::v-deep(.van-tab) {
    border: none;
    padding: 0 !important;
  }

  ::v-deep(.van-tab--active) {
    border-radius: 30px !important;
    background: #000 !important;
  }

  ::v-deep(.van-tabs__wrap) {
    height: 45px !important;
  }

  ::v-deep(.van-tab__text) {
    font-size: 14px !important;
  }
}

/* ✅ 新增：右上角语言切换图标 */
.lang-switch-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
}
</style>
